<template>
    <div>
        <el-table
                v-loading="$store.state.isLoading"
                :border="true"
                :data="$store.state.askForLeave.content"
                style="width: 100%">
            <el-table-column label="姓名" width="250">
                <template slot-scope="scope">
                    {{scope.row.name}}
                </template>
            </el-table-column>

            <el-table-column
                label="请假原因"
                width="380">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                    <p>请假原因: {{ scope.row.content }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{scope.row.content}}</el-tag>
                    </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column
                    label="请假时间"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.askForLeaveTime | date }}</span>
                </template>
            </el-table-column>
        
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" :disabled="disabled" @click="upStatus(scope.row._id,0)" >不同意</el-button>
                    <el-button size="mini" type="success" :disabled="disabled" @click="upStatus(scope.row._id,2)" >同意</el-button>
                </template>
            </el-table-column>
        </el-table>
        <PageInfo actions-name="getAddContent"></PageInfo>
    </div>
</template>

<script>
    name:"askForLeaveList"
    export default {
        data(){
            return {
                disabled:false
            }
        },

         created(){
            // await this.$store.dispatch("getAddContent",{pageIndex:1})
            // console.log(111,this.$store.state.askForLeave.content)
            
        },
        methods:{
           async upStatus(id,type){
               await this.$store.dispatch("upStatus",{id,status:type})
               this.$message({
                    message: '操作成功',
                    type: 'success'
                });
                this.disabled=true
            }
        }
    }
</script>

<style lang="less" scoped>
  
        .el-tag{
            width: 159px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
       
    
</style>